<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<c:set var="path" value="../..${ctx}/define/menu" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagination 分页表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="${ctx}/demo/demo.css" rel="stylesheet" type="text/css" />
<script src="${ctx}/scripts/boot.js" type="text/javascript"></script>
<script src="${ctx}/common/common.js" type="text/javascript"></script>
<style type="text/css">
html,body {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
</head>
<body>

	<div class="mini-splitter" style="width: 100%; height: 100%;">
		<div size="240" showCollapseButton="true">
			<div class="mini-fit">
				<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
					<a class="mini-button" iconCls="icon-save" plain="true" onclick="saveAll()">保存</a> 
					<a class="mini-button" iconCls="icon-upload" plain="true" onclick="input()">导入</a>
					<a class="mini-button" iconCls="icon-download" plain="true" onclick="output()">导出</a>
				</div>
				<ul id="tree1" class="mini-tree" url="${path}/list.html" 
					style="width: 100%;" showTreeIcon="true" textField="name"
					idField="id" parentField="pid" resultAsTree="false">
				</ul>
			</div>
		</div>
		
		<div showCollapseButton="true">
			<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
				<a class="mini-button" iconCls="icon-add" plain="true" onclick="addMenu()">新增</a> 
				<a class="mini-button" iconCls="icon-remove" plain="true" onclick="removeMenu()">删除</a>
				<a class="mini-button" iconCls="icon-save" plain="true" onclick="saveMenu()">保存</a>
			</div>

	        <div id="editForm1" style="padding:5px;">
	            <!--<input class="mini-hidden" name="id"/>-->
	            <table style="width:100%;">
	                <tr>
	                    <td style="width:80px;">菜单编号：</td>
	                    <td><input id="id" name="id" class="mini-textbox" width="260" enabled="false" /></td>
	                    <td style="width:80px;">菜单名称：</td>
	                    <td><input id="text" name="text" class="mini-textbox" width="260" /></td>
	                </tr>
	                <tr>
	                    <td>菜单代码：</td>
	                    <td><input id="code" name="code" class="mini-textbox" width="260" /></td>
	                    <td>操作名称：</td>
	                    <td><input id="actionName" name="actionName" class="mini-buttonedit searchbox" width="260" onbuttonclick="onButtonEdit" /></td>
	               </tr>
	               <tr>
	                    <td>操作类型：</td>
	                    <td><input id="openType" name="openType" class="mini-combobox" data="open_window_type" width="260" /></td>
	                    <td>视图名称：</td>
	                    <td><input id="view" name="view" class="mini-textbox" width="260" /></td>
	                </tr>
	                <tr>
	                    <td>菜单描述：</td>
	                    <td colspan="5"><textarea id="description" name="description" class="mini-textarea" emptyText="请输入备注" style="width:640px;"></textarea></td>
	                </tr>
	            </table>
	        </div>
			
			<div class="header" region="north" height="10" showSplitIcon="true" showHeader="false">
				<h1 style="margin: 0; padding: 5px; cursor: default; font-family: 'Trebuchet MS', Arial, sans-serif;"></h1>
			</div>			
			<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
				<a class="mini-button" iconCls="icon-add" plain="true" onclick="addRow()">新增</a> 
				<a class="mini-button" iconCls="icon-remove" plain="true" onclick="removeRow()">删除</a> 
				<span class="separator"></span> 
				<a class="mini-button" iconCls="icon-upload" plain="true" onclick="uploadRow()">上移</a>
				<a class="mini-button" iconCls="icon-download" plain="true" onclick="downloadRow()">下移</a>
			</div>
			<div class="mini-fit">
				<div id="grid1" class="mini-datagrid"
					style="width: 100%; height: 100%;" borderStyle="border:0;"
					url="${path}/getFields.html"
					allowCellSelect="true" allowCellEdit="true" allowSortColumn="false" showPager="false" showModified="true">
					<div property="columns">
						<div type="comboboxcolumn" name="type" field="type" headerAlign="center" allowSort="true" width="60">
							判断类型 <input property="editor" class="mini-combobox" data="judge_type" style="width: 100%;" minWidth="60" />
						</div>
						<div name=description field="description" headerAlign="center" allowSort="true" width="200">
							判断说明 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="200" />
						</div>
						<div name="expression" field="expression" headerAlign="center" allowSort="true" width="300">
							判断表达式 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="300" />
						</div>
						<div type="comboboxcolumn" name="power" field="power" headerAlign="center" allowSort="true" width="60">
							权限<input property="editor" class="mini-combobox" data="judge_power" style="width: 100%;" minWidth="60" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
mini.parse();
var tree = mini.get("tree1");
var grid = mini.get("grid1");
var form = new mini.Form("#editForm1");

/*********************************************************
 * 事件
 *********************************************************/
	/**
	 * 左侧目录树的鼠标点击事件
	 */
	tree.on("nodeselect", function(e) {
		if (e.isLeaf) {	
 			grid.loading("读取数据中，请稍后......");
			$.ajax({
				url : "${path}/get.html",
				data : {
					id : e.node.id
				},
				type : "post",
				success : function(text) {
					// alert(text);
					form.setData(text);
					grid.setData(text.judge.judges);
				},
				error : function(jqXHR, textStatus, errorThrown) {
					// alert(jqXHR.responseText);
					mini.showMessageBox({
						title : "错误",
						message : jqXHR.responseText,
						buttons : [ "ok" ],
						iconCls : "mini-messagebox-error"
					});
					grid.unmask();
				}
			}); 
		} else {
			grid.setData([]);
			grid.setTotalCount(0);
			form.setData(text);
		}
		editDatabaseName = e.node.id;
	});

/*********************************************************
 * 用户按钮操作方法
 *********************************************************/
	/**
	 * 新增判断
	 */
	function addRow() {
		var newRow = {
		};
		//newRow.id = node.id;
		grid.addRow(newRow, grid.getData().length);
	}
	/**
	 * 删除判断
	 */
	function removeRow() {
		var rows = grid.getSelecteds();
		if (rows.length > 0) {
			grid.removeRows(rows, true);
		}
	}
	/**
	 * 判断上移
	 */
	function uploadRow() {
        var row = grid.getSelected();
        if (row) {
            var index = grid.indexOf(row);
            grid.moveRow(row, index - 1);
        }
	}
	/**
	 * 判断下移
	 */
	function downloadRow() {
        var row = grid.getSelected();
        if (row) {
            var index = grid.indexOf(row);
            
            grid.moveRow(row, index + 2);
        }
	}
	/**
	 * 新增菜单
	 */
	function addMenu() {
		var node = tree.getSelectedNode();
		if (node) {
			grid.setData([]);
			grid.setTotalCount(0);
			form.setData([]);
		} else {
			showWarn("请先选择菜单创建的位置！");
		}
	}
	/**
	 * 删除菜单
	 */
	function removeMenu() {
		var node = tree.getSelectedNode();
		if (node) {
			mini.confirm("确定删除菜单吗？", "确定？", function(action) {
				if (action == "ok") {
					$.ajax({
						url : "${path}/delete.html",
						data : {
							name : node.id
						},
						type : "post",
						success : function(text) {
							tree.removeNode(node);
							grid.setData([]);
							grid.setTotalCount(0);
							form.setData([]);
						},
						error : function(jqXHR, textStatus, errorThrown) {
							showErr(jqXHR.responseText);
						}
					});
				}
			});
		} else {
			showWarn("请先选择要删除的菜单！");
		}
	}
	/**
	 * 保存菜单
	 */
	function saveMenu() {
		var node = tree.getSelectedNode();
		if (node) {
			var gd = grid.getChanges();
			var fd = form.getData();
			var id = node.id;
			var json1 = mini.encode(fd);
			var json2 = mini.encode(gd);
			$.ajax({
				url : "${path}/save.html",
				data : {
					menuID : id,
					menu : json1,
					judge : json2
				},
				type : "post",
				success : function(json) {
					showInfo(json.message);
				},
				error : function(jqXHR, textStatus, errorThrown) {
					showErr(jqXHR.responseText);
				}
			});
		} else {
			showWarn("请先选择菜单保存的位置！");
		}
	}
	/**
	 * 保存所有菜单
	 */
	function saveAll() {
		$.ajax({
			url : "${path}/saveAll.html",
			data : {},
			type : "post",
			success : function(json) {
				showInfo(json.message);
			},
			error : function(jqXHR, textStatus, errorThrown) {
				showWarn(jqXHR.responseText);
			}
		});
	}
	/**
	 * 导出
	 */
	function input() {
	}
	/**
	 * 导出
	 */
	function output() {
	}
	
    function onButtonEdit(e) {
        var btnEdit = this;
        alert('ok');
        return;
        mini.open({
            url: bootPATH + "../demo/CommonLibs/SelectGridWindow.html",
            title: "选择列表",
            width: 650,
            height: 380,
            ondestroy: function (action) {
                //if (action == "close") return false;
                if (action == "ok") {
                    var iframe = this.getIFrameEl();
                    var data = iframe.contentWindow.GetData();
                    data = mini.clone(data);    //必须
                    if (data) {
                        btnEdit.setValue(data.id);
                        btnEdit.setText(data.name);
                    }
                }

            }
        });
    }
</script>

</body>
</html>